<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <el-card>
          <div class="type">
            <div
              v-for="(item, index) in list"
              :key="item.title"
              class="typeItem"
              :class="{ 'active': activeTab === index }"
              @click="onTypeClick(item)"
            >
              <div class="icon">
                <img :src="getUrl(item.icon)" alt="" />
              </div>
              <div class="title">{{ item.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card class="table-wrapper">
          <div v-for="el in tableData" :key="el.title" class="tableItem" @click="handleItemClick(el)">
            <div v-if="el.tp" class="left">
              <!-- <img style="width: 100%; height: 100%" :src="el.tp" alt="" /> -->
              <el-image fit :src="el.tp" preview-teleported :preview-src-list="[el.tp]" hide-on-click-modal class="item-img"> </el-image>
            </div>
            <div class="right">
              <div class="top">
                <div class="title">{{ el.title }}</div>
                <div class="content">{{ el.content }}</div>
              </div>
              <div class="time">{{ el.fbsj }}</div>
            </div>
          </div>
          <el-empty v-if="tableData.length === 0" description="暂无数据" />
        </el-card>
        <!-- <pagination
          v-if="totalCount > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="totalCount"
          layout="total,sizes, prev, pager, next"
          @pagination="getList"
        /> -->
      </el-col>
    </el-row>
    <div>
      <el-dialog v-model="dialog.visible" class="customDialog" width="900px">
        <div class="news-content">
          <div class="news-header">
            <h1 class="title">
              {{ form.title }}
            </h1>
            <div>
              <span style="margin-right: 10px">所属村：{{ form.ssc || '--' }}</span>
              <span style="margin-right: 10px">发布时间：{{ form.fbsj || '--' }}</span>
            </div>
          </div>
          <div class="news-main">
            <div v-if="form.content" v-html="form.content" style="margin-top: 10px"></div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
const cyzlValue = ref();
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
import useMapStore from '@/store/modules/map';

const queryParams = ref<OnlineQuery>({
  pageNum: 1,
  pageSize: 100,
  lmId: '',
  ssc: useMapStore().szxcCountryText
});
const list = ref([
  {
    title: '政务公开',
    icon: 'wuyu'
  },
  {
    title: '财务公开',
    icon: 'wuyu1'
  },
  {
    title: '党务公开',
    icon: 'wuyu3'
  },
  {
    title: '村务公开',
    icon: 'wuyu4'
  }
]);

const tableData = ref([
  // {
  //   img: 'wuyu1',
  //   title: '2024年上班年役前教育人员名单公示',
  //   content: '经区征兵领导小组研究，确定我镇黄金龙等7名青年参加上半年役前教育训练，现将参训人员相关信息予以公示，接受广大群众监督、举报。',
  //   time: '2024-02-08'
  // }
]);

const activeTab = ref(0);

const totalCount = ref(0);

const demoFormRef = ref<ElFormInstance>();
const initFormData = {
  id: undefined,
  tenantId: undefined,
  title: undefined,
  fbsj: undefined,
  content: undefined,
  tp: undefined,
  ssc: undefined,
  ssxz: undefined,
  remark: undefined,
  file: undefined
};
const data = reactive({
  form: { ...initFormData }
});
const { form } = toRefs(data);
const dialog = reactive<DialogOption>({
  visible: false,
  title: '详情信息'
});
const loading = ref(false);
const title = ref('');
const reset = () => {
  form.value = { ...initFormData };
  demoFormRef.value?.resetFields();
};

const getUrl = (icon) => {
  console.log('ii', icon);

  return new URL(`../../../assets/szxc/${icon}.png`, import.meta.url).href;
};
// onMounted(() => {
//   nextTick(() => {
//   });
// });

const categorys = ref({});
// 获取阳光村务分类
const getCategory = () => {
  $szxcapi.hmfwLmQuery({ parentId: 1 }).then(({ data = [] }) => {
    data.forEach((item) => {
      categorys.value[item.lmmc] = item.id;
    });
    queryParams.value.lmId = categorys.value['政务公开'];
    getList();
  });
};

const getList = () => {
  $szxcapi.hmfwQuery(queryParams.value).then(({ rows = [], total = 0 }) => {
    tableData.value = rows;
    totalCount.value = total;
  });
};

const onTypeClick = async (item) => {
  queryParams.value.lmId = categorys.value[item.title];
  getList();
};

const handleItemClick = async (item) => {
  reset();
  const _id = item.id;
  const res = await $szxcapi.hmfwInfoQuery({ id: _id });
  Object.assign(form.value, res.data);
  dialog.visible = true;
};

const country = ref(useMapStore().szxcCountryText);
watch(
  () => useMapStore().szxcCountryText,
  (value) => {
    country.value = value;
    queryParams.value.ssc = value;
    getList();
  }
);

onMounted(() => {
  getCategory();
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .el-card {
    // background: #1d5076;
    background: #178af01a;
  }
  .type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 200px;
    .typeItem {
      margin: 0px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        transform: scale(1.05);
      }
      &.active {
        box-shadow: inset 0px 0px 15px #fff;
      }
      .icon {
        margin-left: 36px;
      }
    }
    .typeItem:nth-child(1) {
      background: rgb(105, 133, 233);
      .title {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(2) {
      background: rgb(127, 120, 234);
      .title {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(3) {
      background: rgb(223, 130, 115);
      .title {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(4) {
      background: rgb(98, 125, 233);
      .title {
        color: rgb(112, 182, 3);
      }
    }
  }
  .table-wrapper {
    height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
  }
  .tableItem {
    display: flex;
    color: white;
    height: 100px;
    margin-bottom: 10px;
    .left {
      width: 160px;
      height: 100%;

      ::v-deep .item-img {
        width: 100%;
        padding-right: 10px;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .top {
        .title {
          font-size: 18px;
          line-height: 30px;
          cursor: pointer;

          &:hover {
            text-decoration: underline;
            color: rgb(23, 138, 240);
          }
        }
      }
    }
  }
}
</style>
